<template>
  <div class="ckerk_time_line__">
    <!--会诊-->
    <div class="time_line">
      <div class="time_line_history">
        <div class="tl-timeline">
          <div v-for="item in recordList" :key="item.id" class="tl-container right">
            <div class="date">{{ item.id }}</div>
            <div class="content">
              <h2>
                {{ item.createTime }}
                <span :style="{ color: getRecordColor(item.type), margin: '0 0 0 5px' }">
                  {{ item.type | recordTypeFlt }}
                </span>
                <span
                  v-if="item.type === RecordType.APPLY_ORDER.id"
                  :style="{
                    color: item.status === 0 ? '#663399' : item.status === 1 ? '#009999' : '#FF3333',
                    margin: '0 0 0 5px',
                  }">
                  {{ item.status === 0 ? '开单' : item.status === 1 ? '跟进' : '关闭' }}
                </span>
              </h2>
              <div class="time_line_body">
                <div>
                  <span>{{ item.content }}</span>
                  <div v-if="item.type === RecordType.CONSULTATION.id" class="consultation">
                    <div v-if="item.scene">场景: {{ item.scene }}</div>
                    <div v-if="item.trust">信任: {{ item.trust }}</div>
                    <div v-if="item.item">品项: {{ item.item }}</div>
                  </div>
                </div>
                <div class="recorder__">{{ item.recorder }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="time_line_new">
        <div style="margin: 10px; text-align: center">
          <el-input
            v-model="newReplay.content"
            size="small"
            style="width: 100%"
            type="textarea"
            maxlength="500"
            show-word-limit
            :autosize="{ minRows: 4, maxRows: 4 }"
            :disabled="isCoach && !(rid > 0)"
            :placeholder="rid > 0 ? '请输入回复内容' : '请描述会诊需求'"></el-input>
          <el-button
            type="primary"
            size="small"
            :disabled="isCoach && !(rid > 0)"
            style="width: 100px; margin-top: 10px"
            @click="goReplyOrder">
            提交
          </el-button>
          <el-button
            v-if="rid > 0"
            type="info"
            size="small"
            style="width: 100px; margin-top: 10px"
            @click="goCloseOrder">
            关闭会诊
          </el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import * as apiSts from '@/api/_com_';
// 引入后端 API
import { closeOrderRecord, getClerkOrderRecord, replyOrderRecord } from '@/api/record';
import { addRecord } from '@/api/ym';
import '@/assets/css/timeline2.css';
// 引入自定义组件
import RecordType from '@/utils/enum/record-type';
import { isCoachRole } from '@/utils/enum/roles';
// 引入第三方组件
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';

export default {
  name: 'OrderList',
  components: {},
  filters: {
    recordTypeFlt(type) {
      const tmp = RecordType.getById(type);
      if (!tmp) {
        return '未知';
      }
      return tmp.name;
    },
  },
  data() {
    return {
      rid: undefined,
      isFetching: false,
      RecordType: RecordType,
      showImagePage: false,
      showFacialPage: false,
      imageUrl: '',
      recordList: [],
      newReplay: {
        content: '',
        cid: null,
        recorder: null,
        type: 7,
      },
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
    isCoach() {
      return isCoachRole(this.deptId);
    },
  },
  methods: {
    getRecordColor(type) {
      switch (type) {
        case RecordType.CONSULTATION.id:
        case RecordType.FACIAL.id:
          return '#FF7510';
        case RecordType.FOLLOW_UP.id:
          return '#EFAC00';
        case RecordType.EMPOWERMENT.id:
          return '#00A61B';
        case RecordType.CUSTOMER_RELATIONSHIP.id:
          return '#1073FF';
      }
    },
    loadOrderList: async function (cid, rid) {
      if (this.isFetching) {
        return;
      }
      this.rid = rid;
      this.isFetching = true;
      this.newReplay.cid = cid;
      this.newReplay.recorder = this.name;
      this.recordList.splice(0, this.recordList.length);
      const errAlertMsg = '获取顾客会诊失败';
      await getClerkOrderRecord(cid)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          if (res.data.data && res.data.data.length > 0) {
            this.recordList.push(...res.data.data);
          }
        })
        .catch(err => {
          console.log('getClerkOrderRecord', err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.isFetching = false;
        });
    },
    goCloseOrder: async function () {
      const params = {};
      params.cid = this.newReplay.cid;
      params.rid = this.rid > 0 ? this.rid : null;
      const errAlertMsg = '关闭会诊失败';
      await closeOrderRecord(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.loadOrderList(this.newReplay.cid, -1);
        })
        .catch(err => {
          console.error(err);
          MessageBox.alert(errAlertMsg);
        });
    },
    goReplyOrder: async function () {
      if (this.rid > 0) {
        await this.replyOrder();
      } else {
        await this.openOrder();
      }
    },
    openOrder: async function () {
      this.newReplay.type = RecordType.APPLY_ORDER.id;
      this.newReplay.status = 0;
      const errAlertMsg = '添加会诊失败';
      addRecord(this.newReplay)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.newReplay.content = '';
          const ret = res.data.data;
          if (this.rid > 0) {
            this.loadOrderList(ret.cid, this.rid);
          } else {
            this.loadOrderList(ret.cid, ret.id);
          }
        })
        .catch(err => {
          console.error(err);
        });
    },
    replyOrder: async function () {
      if (this.newReplay.content) {
        this.newReplay.content = this.newReplay.content.trim();
      }
      if (!this.newReplay.content) {
        MessageBox.alert('会诊回复内容不能为空');
        return;
      }
      const params = {};
      params.cid = this.newReplay.cid;
      params.rid = this.rid > 0 ? this.rid : null;
      params.reply = this.newReplay.content;
      const errAlertMsg = '回复会诊失败';
      await replyOrderRecord(params)
        .then(res => {
          if (res.data.status !== apiSts.ResponseOK) {
            if (res.data.message) {
              MessageBox.alert(res.data.message);
            } else {
              MessageBox.alert(errAlertMsg);
            }
            return;
          }
          this.newReplay.content = '';
          this.loadOrderList(this.newReplay.cid, this.rid);
        })
        .catch(err => {
          console.error(err);
          MessageBox.alert(errAlertMsg);
        });
    },
  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/css/scrollbar.scss';

.ckerk_time_line__ {
  width: 100%;
  padding: 0 0 0 0;
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: normal;
  background: none;

  .time_line {
    width: 100%;
    height: 100vh;
    background-color: beige;
    opacity: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: flex-start;

    ul {
      padding-inline-start: 10px;
    }

    .time_line_history {
      width: 100%;
      height: 75vh;
      padding: 0 10px 0 0;
      display: block;
      overflow-x: hidden;
      overflow-y: scroll;
      background: linear-gradient(to bottom, #e5e8ed, #efeff1);
      border: 1px solid #e5e8ed;
      border-radius: 5px 5px 0 0;

      .time_line_body {
        min-height: 40px;
        margin: 0;
        padding: 0 5px 0 5px;
        position: relative;
        font-size: 16px;
        line-height: 16px;
        color: #454545;

        .consultation {
          margin: 5px 0 0 0;
          font-size: 13px;
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: flex-start;
          gap: 2px;
        }

        .recorder__ {
          position: absolute;
          right: 10px;
          bottom: -5px;
          color: #666666;
          font-size: 10px;
        }
      }
    }

    .time_line_new {
      width: 100%;
      height: 25vh;
      padding: 0 0 5px 0;
      display: block;
      background: linear-gradient(to bottom, #efeff1, #e5e8ed);
      border: 1px solid #e5e8ed;
      border-radius: 0 0 5px 5px;
    }
  }
}
</style>
